<?= $this->Html->script('https://maps.googleapis.com/maps/api/js?sensor=true') ?>
<div class="map" style="width:<?= $width ?>px;height:<?= $height ?>px"></div>

<script type="text/javascript">
var map, marker;
$(function(){
	var tmp = '<?= $latlng ?>'.split(';', 2);
	if (tmp.length<2) {
		tmp = [44.820556,20.462222]
	}
	
	var pos = new google.maps.LatLng(tmp[0], tmp[1]);
	$('input[type=text].lat').val(tmp[0]);
    	$('input[type=text].lng').val(tmp[1]);

	var mapOptions = {
        center: pos,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        rotateControl: false,
        disableDoubleClickZoom: true
    };

    map = new google.maps.Map($(".map")[0], mapOptions);
    
    marker = new google.maps.Marker({
        map: map,
        position: pos
    });
    
    google.maps.event.addListener(map, 'dblclick', function(e){
    	var lat = e.latLng.lat();
        var lng = e.latLng.lng();
        if (confirm('Da li želite da promenite lokaciju na:\n\n\tlat:  '+lat+'\n\tlng: '+lng)) {
        	moveMarkerTo(lat, lng);
    	}
    });
});

function moveMarkerTo(lat, lng) {
	map.panTo(new google.maps.LatLng(lat, lng));
	marker.setPosition(new google.maps.LatLng(lat, lng));
	
	$('input[type=hidden].latlng').val(lat+';'+lng);
	$('input[type=text].lat').val(lat);
	$('input[type=text].lng').val(lng);
}

</script>
